<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客服聊天界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        .chat-container {
            width: 1000px;
            height: 600px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .chat-header {
            padding: 20px;
            background-color: cornflowerblue;
            color: #fff;
            text-align: center;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        .chat-header a {
            left: 20px;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
        }
        .chat-messages {
            padding: 10px;
            flex: 1;
            overflow-y: auto;
        }
        .message {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
        }
        .message img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .message-content {
            max-width: 70%;
            padding: 10px;
            border-radius: 10px;
            background-color: #f1f1f1;
        }
        .message-content.self {
            background-color: cornflowerblue;
            color: #fff;
            align-self: flex-end;
            margin-left: auto;
        }
        .message.self {
            flex-direction: row-reverse;
        }
        .message.self img {
            margin-left: 10px;
            margin-right: 0;
        }
        .chat-input {
            display: flex;
            padding: 10px;
            border-top: 1px solid #ddd;
        }
        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-right: 10px;
        }
        .chat-input button {
            padding: 10px 15px;
            background-color: cornflowerblue;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .clear-button {
            background-color: #ff4d4d;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
    <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="chat-container">
    <div class="chat-header">
        <a href="index.html">&#8592; 返回首页</a>
        客服聊天
        <button class="clear-button" onclick="clearMessage()">清空聊天记录</button>
    </div>
    <div class="chat-messages" id="chat-messages">
        <!-- 消息会显示在这里 -->
    </div>
    <div class="chat-input">
        <label for="message-input"></label><input type="text" id="message-input" placeholder="输入消息...">
        <button onclick="sendMessage()">发送</button>
    </div>
</div>
<script>
    // 动态生成聊天记录
    function loadChatMessages(data) {
        const chatMessages = document.getElementById('chat-messages');
        chatMessages.innerHTML = '';

        // 遍历数组并生成消息气泡
        data.forEach(entry => {
            const messageElement = document.createElement('div');
            messageElement.classList.add('message');

            const avatar = document.createElement('img');
            avatar.src = 'https://via.placeholder.com/40';

            const messageContent = document.createElement('div');
            messageContent.classList.add('message-content');
            messageContent.textContent = entry.message;

            if (entry.role === 'user') {
                // 用户的消息显示在右边
                messageElement.classList.add('self');
                messageContent.classList.add('self');
            }

            messageElement.appendChild(avatar);
            messageElement.appendChild(messageContent);
            chatMessages.appendChild(messageElement);
        });

        // 滚动到聊天记录底部
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function sendMessage() {
        const messageInput = document.getElementById('message-input');
        const messageText = messageInput.value;
        if (messageText.trim() === '') return;

        $.ajax({
            url: "/support",
            type: "get",
            data: { type: "insert", user: "user", text: messageText },
            success: function () {
                messageInput.value = '';  // 清空输入框
                getMessage();  // 发送消息后刷新消息列表
            }
        });
    }

    function getMessage() {
        $.ajax({
            url: "/support",
            type: "get",
            data: { type: "get" },
            dataType: "json",
            success: function (dataString) {
                const data = JSON.parse(dataString);
                loadChatMessages(data);  // 加载消息列表
            }
        });
    }

    function clearMessage() {
        $.ajax({
            url: "/support",
            type: "get",
            data: {type: "clear"},
            success: function () {
                getMessage();  // 清空消息后刷新消息列表
            }
        })
    }

    // 页面加载时获取消息
    getMessage();
    // 每5秒获取一次消息
    setInterval(getMessage,5000);
</script>
</body>
</html>
